import React from 'react'
import { Avatar } from '@arco-design/web-react'
import './MessageItem.css'

const TextMessage = (props) => {
  const {
    msg: { id, content, avatar, time },
    reverse,
  } = props
  return (
    <div
      id={id}
      style={{
        width: '100%',
        paddingTop: 5,
        paddingBottom: 5,
      }}
    >
      <div className='message-item-wrapper'>
        <div id={id} className={`message-item${reverse ? ' message-item-reverse' : ''}`}>
          <div className='message-left'>
            <div className='message-avatar'>
              <Avatar className='chat-window-header-avatar' size={32} style={{ lineHeight: '32px' }}>
                <img className={'cant-drag-and-select'} alt='avatar' src={avatar} />
              </Avatar>
            </div>
          </div>
          <div className='message-right'>
            <div className={`message-info${reverse ? ' message-item-reverse' : ''}`}>
              {/* <span className='message-timestamp noselect'>{getChatDateTime(time)}</span> */}
              <span className='message-timestamp noselect'>{time}</span>
            </div>
            <div className={`message-section${reverse ? ' message-item-reverse' : ''}`}>
              <div className={`message-section-left${reverse ? ' message-item-color' : ''}`}>
                <div className='message-content-container'>
                  <div className='message-content'>
                    <div className='message-text'>
                      <div className='limit-height-container' style={{ maxHeight: 315 }}>
                        <div className='wrapper'>
                          <div>
                            <pre>
                              <div className='richTextContainer'>
                                <span className='text-only'>{content}</span>
                              </div>
                            </pre>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              {/* <div className='message-section-right'></div> */}
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

const renderMessage = (msg, reverse) => {
  // 这里要改类型字段
  // if (msg.type === 'text') {
  //   return <TextMessage msg={msg} />
  // }
  return <TextMessage msg={msg} reverse={reverse} />
}

function MessageItem(props) {
  const { msg, reverse } = props
  return renderMessage(msg, reverse)
}

export default MessageItem
